<template>
    <div>
        <div class="table-header">
            <a-button class="editable-add-btn" type="primary" @click="showAdd" style="margin-bottom: 8px">新增</a-button>
            <div class="filter">
                <a-input-search v-model:value="keyword" style="width:200px;" @search="search" />
            </div>
        </div>
        <a-table
            :dataSource="dataSource" 
            :row-key="record=>record.id" 
            :pagination="{total:totalSize,current:currentPage,pageSize:pageSize,showSizeChanger:true,showQuickJumper:true}"
            @change="changePage"
            >
            <a-table-column key="title" title="标题" data-index="title"></a-table-column>
            <a-table-column key="mName" title="姓名" data-index="mName">
                <template #default="{text}">{{familyName}}{{text}}</template>
            </a-table-column>
            <a-table-column key="updatetime" title="更新时间" data-index="updatetime"></a-table-column>
            <a-table-column key="ctrls" title="操作" data-index="ctrls">
                <template #default="{ record }">
                    <a-button type="link" @click="edit(record.id)">编辑</a-button>
                    <a-divider type="vertical" />
                    <a-button type="link" danger @click="del(record.id)">删除</a-button>
                </template>
            </a-table-column>
        </a-table>

        <a-modal v-model:visible="editVisible" title="formState.id?'编辑名人轶事':'新增名人轶事'" @ok="handleAdd" :width="800">
            <a-row>
                <a-col :span="4" class="label-name"><span class="red">*</span>标题</a-col>
                <a-col :span="20">
                    <a-input v-model:value="formState.title" />
                </a-col>
            </a-row>
            <div class="blank"></div>
            <a-row>
                <a-col :span="4" class="label-name"><span class="red">*</span>人物</a-col>
                <a-col :span="20">
                    <a-select
                        ref="select"
                        v-model:value="formState.memberId"
                        style="width: 100%"
                        show-search
                        @search="handleSearch"
                        @change="handleChange"
                        :filterOption="(inputValue,option)=>filterOption(inputValue,option)"
                        >
                        <a-select-option v-for="item in selectList" :key="item.id">第{{item.gid}}世“{{item.gName}}”字辈{{familyName}}{{item.name}}</a-select-option>
                    </a-select>
                </a-col>
            </a-row>            

            <div class="blank"></div>
            <a-row>
                <a-col :span="4" class="label-name">轶事介绍</a-col>
                <a-col :span="20">
                    <vue3-tinymce v-model="formState.content" :setting="edSetting" @change="changeContent" />
                </a-col>
            </a-row>
        </a-modal>
    </div>
</template>

<script>
import { defineComponent, onMounted, reactive, toRefs,createVNode } from 'vue';
import { SmileOutlined,QuestionCircleOutlined } from '@ant-design/icons-vue';
import { Modal } from 'ant-design-vue/lib';
import Vue3Tinymce from '@jsdawn/vue3-tinymce';
import Http from '@/until/http';
import config from '@/until/configs';
import { messageTips } from '@/until/tools';
import { debounce } from 'lodash-es';

export default defineComponent({    
    components:{SmileOutlined,Vue3Tinymce,QuestionCircleOutlined},
    setup() {
        const state = reactive({
            dataSource:[],
            editVisible:false,
            keyword:'',
            selectList:[],
            familyName:config.familyName,
            totalSize:0,
            currentPage:1,
            pageSize:10,
            familyName:config.familyName
        });

        const edSetting = reactive({
            menubar: false,
            height: 400,
            toolbar:
            "bold italic underline h1 h2 blockquote codesample numlist bullist link image | removeformat fullscreen",
            plugins: "codesample link image table lists fullscreen",
            toolbar_mode: "sliding",
            nonbreaking_force_tab: true,
            link_title: false,
            default_link_target: "_blank",
            content_style: "body{font-size: 16px}",
            // 自定义 图片上传模式
            custom_images_upload: true,
            images_upload_url: "your_upload_api_url...",
            custom_images_upload_callback: (res) => res.url,
            custom_images_upload_param: { id: "xxxx01", age: 18 }
        })

        const formState=reactive({
            id:null,
            title:'',
            memberId:null,
            content:''
        })

        const showAdd = ()=>{
            Object.assign(state,{
                editVisible:true
            })
        }

        const handleSearch=(val)=>{
            fetch(val)
        }

        const handleChange=(val)=>{
            fetch(val)
        }

        const fetch= debounce((value)=> {
            Http.searchParent({name:value})
            .then(d => {
                value = '';
                Object.assign(state,{selectList:d.list});
            });
        },500);

        const handleAdd = ()=>{
            if(formState.name==='') {
                messageTips('请填标题',2);
                return false;
            }
            if(formState.memberId===null) {
                messageTips('请选择人物',2);
                return false;
            }
            if(formState.content==='') {
                messageTips('请输入详情',2);
                return false;
            }
            let params = {
                mid:formState.memberId,
                title:formState.title,
                content:formState.content
            }
            let funcName = 'addFamous';
            if(formState.id) {
                params.id = formState.id;
                funcName = 'editFamous';
            }
            Http[funcName](params).then(res=>{
                if(res) {
                    if(res.success) {
                        messageTips(res.message,3);
                        Object.assign(formState,{
                            id:null,
                            title:'',
                            memberId:null,
                            content:''
                        })
                        Object.assign(state,{
                            editVisible:false
                        })
                        if(params.id) {
                            getList({page:state.currentPage,pageSize:state.pageSize,title:state.keyword});
                        } else {
                            state.currentPage = 1;
                            getList({page:state.currentPage,pageSize:state.pageSize});
                        }
                    } else {
                        messageTips(res.message,1);
                    }
                }
            })
        }

        const edit = (id)=>{
            Http.getFamousDetail({id}).then(res=>{
                if(res.article) {
                    Object.assign(formState,{
                        id:id,
                        title:res.article.title,
                        memberId:res.article.mid,
                        content:res.article.content
                    });
                }
                if(res.member) {
                    Object.assign(state,{
                        selectList:[res.member],
                        editVisible:true
                    })
                }
            })
        }

        const del = (id)=>{
            Modal.confirm({
                title:'提示',
                icon: createVNode(QuestionCircleOutlined),
                content:'您确定要删除吗？',
                centered:true,
                okText:'确定',
                cancelText:'取消',
                onOk(){
                    Http.delFamous({id:id}).then(res=>{
                        if(res) {
                            if(res.success) {
                                messageTips(res.message,3);
                                getList({page:state.currentPage,pageSize:state.pageSize,title:state.keyword});
                            }
                        }
                    })
                }
            })
            
        }


        const changeContent = ()=>{}

        const search=()=>{
            let params = {}
            if(state.keyword) {
                params.title = state.keyword;
            }
            getList(params);
        }

        const changePage = (e)=>{
            let params = {
                page:e.current,
                pageSize:e.pageSize,
            }
            if(state.keyword) {
                params.title = state.keyword;
            }
            getList(params);
        }

        const getList=(params)=>{
            Http.getFamous(params).then(res=>{
                if(res.list) {
                    Object.assign(state,{
                        dataSource:res.list,
                        totalSize:res.count,
                    })
                    if(params.page) {
                        Object.assign(state,{                                
                            currentPage:params.page,
                        })
                    }
                    if(params.pageSize) {
                        Object.assign(state,{                                
                            pageSize:params.pageSize,
                        });
                    }
                }
            })
        }

        const filterOption = (inputvalue,option) => {
            let name = option.children[0].children;
            if(name.indexOf(inputvalue)===-1) {
                return false;
            } else {
                return true;
            }
        }

        onMounted(()=>{
            getList({});
        })

        return {
            ...toRefs(state),
            formState,
            showAdd,
            handleAdd,
            edit,
            del,
            changeContent,
            edSetting,
            handleSearch,
            handleChange,
            changePage,
            search,
            filterOption
        }
    }
})
</script>

<style lang="scss" scoped>
@import '@/scss/famous.scss';
</style>